<template>
	<view class="auto-page" style="background-color: #FFFFFF;">
		<view class="item">
			<view class="title">优惠券名称</view>
			<view class="item-data" style="border: 2rpx solid #e8e8e8;">
				<input type="text">
			</view>
		</view>
		<view class="item">
			<view class="title">优惠券类型</view>
			<view class="item-data">
				<radio-group @change="radioChange($event, 'couponType')">
					<label class="m-r-15">
						<radio :checked="couponType == 1" value="1" /><text>店铺券</text>
					</label>
					<label>
						<radio :checked="couponType == 2" value="2" /><text>商品券</text>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="item" v-if="couponType == 2">
			<view class="title">商品</view>
			<view style="height: 80rpx;width: 80rpx;display: flex;justify-content: center;align-items: center;border: 2rpx dashed #999999;border-radius: 16rpx;">
				<image style="height: 60rpx;width: 60rpx;" src="../../static/icons/add.png" mode="aspectFill" @click="addGoods"></image>
			</view>
		</view>
		<view class="item">
			<view class="title">优惠券面值</view>
			<view class="f-row" style="height: 60rpx;border: 2rpx solid #e8e8e8;border-radius: 16rpx;width: 270rpx;overflow: hidden;">
				<view class="click-opacity reduce-icon" :style="(discountNum - 1 < 0) ? 'background-color: #f8f8f8': ''" @click="discountNumClick(false)">
					<view style="font-size: 32rpx;">-</view>
				</view>
				<view style="flex: 1;display: flex;justify-content: center;align-items: center;padding: 0 30rpx;">
					<input style="display: inline-block;height:60rpx;line-height: 60rpx;white-space: nowrap;
							overflow-x: hidden;max-width: 60rpx;"
					 @input="inputHandle($event , 'discountNum')" maxlength="4" type="digit" :value="discountNum">
				</view>
				<view class="click-opacity add-icon" :style="(discountNum + 1 > 9999) ? 'background-color: #f8f8f8': ''" @click="discountNumClick(true)">
					<view style="font-size: 32rpx;">+</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="title">使用门槛</view>
			<view class="item-data">
				<radio-group @change="radioChange($event, 'condition')">
					<label class="m-r-15">
						<radio :checked="condition == 1" value="1" /><text>无门槛</text>
					</label>
					<label>
						<radio :checked="condition == 2" value="2" /><text>有门槛</text>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="item" v-if="condition == 2">
			<view class="title">优惠券最低消费</view>
			<view class="f-row" style="height: 60rpx;border: 2rpx solid #e8e8e8;border-radius: 16rpx;width: 270rpx;overflow: hidden;">
				<view class="click-opacity reduce-icon" :style="(miniPay - 1 < 0) ? 'background-color: #f8f8f8': ''" @click="miniPayClick(false)">
					<view style="font-size: 32rpx;">-</view>
				</view>
				<view style="flex: 1;display: flex;justify-content: center;align-items: center;padding: 0 30rpx;">
					<input style="display: inline-block;height:60rpx;line-height: 60rpx;white-space: nowrap;
							overflow-x: hidden;max-width: 60rpx;"
					 @input="inputHandle($event , 'miniPay')" maxlength="4" type="digit" :value="miniPay">
				</view>
				<view class="click-opacity add-icon" :style="(miniPay + 1 > 9999) ? 'background-color: #f8f8f8': ''" @click="miniPayClick(true)">
					<view style="font-size: 32rpx;">+</view>
				</view>
			</view>
		</view>
		<view class="item" style="height: 200rpx;align-items: unset;flex-direction: column;">
			<view class="f-row" style="align-items: center;height: 100rpx;">
				<view class="title">使用有效期</view>
				<view class="item-data">
					<radio-group @change="radioChange($event, 'usedayType')">
						<label class="m-r-15">
							<radio :checked="usedayType == 1" value="1" /><text>天数</text>
						</label>
						<label>
							<radio :checked="usedayType == 2" value="2" /><text>时间段</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="f-row" style="height: 100rpx;" v-if="usedayType == 1">
				<view style="height: 100rpx;width: 200rpx;"></view>
				<view class="f-row f-1" style="align-items: center;">
					<view class="f-row" style="height: 60rpx;border: 2rpx solid #e8e8e8;border-radius: 16rpx;width: 270rpx;overflow: hidden;">
						<view class="click-opacity reduce-icon" :style="(useday - 1 < 0) ? 'background-color: #f8f8f8': ''" @click="usedayClick(false)">
							<view style="font-size: 32rpx;">-</view>
						</view>
						<view style="flex: 1;display: flex;justify-content: center;align-items: center;padding: 0 30rpx;">
							<input style="display: inline-block;height:60rpx;line-height: 60rpx;white-space: nowrap;
									overflow-x: hidden;max-width: 60rpx;"
							 @input="inputHandle($event , 'useday')" maxlength="3" type="number" :value="useday">
						</view>
						<view class="click-opacity add-icon" :style="(useday + 1 > 999) ? 'background-color: #f8f8f8': ''" @click="usedayClick(true)">
							<view style="font-size: 32rpx;">+</view>
						</view>
					</view>
				</view>
			</view>
			<view class="f-row" v-if="usedayType == 2" style="height: 100rpx;">
				<view style="height: 100rpx;width: 200rpx;"></view>
				<view class="f-row f-1" style="align-items: center;">
					<view class="item-data" style="align-items: center;border: 2rpx solid #e8e8e8;justify-content: center;">
						<view class="f-1">
							<picker mode="date" :value="date" @change="bindDateChange($event,true)">
								<view>{{date}}</view>
							</picker>
						</view>
						<view class="f-1" style="text-align: center;">至</view>
						<view class="f-1">
							<picker mode="date" :value="secdate" @change="bindDateChange($event,false)">
								<view>{{secdate == '' ? '请选择' : secdate}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="item" style="height: auto;align-items: unset;flex-direction: column;">
			<view class="f-row" style="align-items: center;height: 100rpx;">
				<view class="title">领取时间</view>
				<view class="item-data">
					<radio-group @change="radioChange($event, 'getTime')">
						<label class="m-r-15">
							<radio :checked="getTime == 1" value="1" /><text>限时</text>
						</label>
						<label>
							<radio :checked="getTime == 2" value="2" /><text>不限时</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="f-row" v-if="getTime == 1" style="height: 100rpx;">
				<view style="height: 100rpx;width: 200rpx;"></view>
				<view class="f-row f-1" style="align-items: center;">
					<view class="item-data" style="align-items: center;border: 2rpx solid #e8e8e8;justify-content: center;">
						<view class="f-1">
							<picker mode="date" :value="limitDate" @change="bindDateChange($event,true)">
								<view>{{limitDate}}</view>
							</picker>
						</view>
						<view class="f-1" style="text-align: center;">至</view>
						<view class="f-1">
							<picker mode="date" :value="limitSecDate" @change="bindDateChange($event,false)">
								<view>{{limitSecDate == '' ? '请选择' : limitSecDate}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="title">类型</view>
			<view class="item-data">
				<radio-group @change="radioChange($event , 'userType')">
					<label class="m-r-15">
						<radio :checked="userType == 1" value="1" /><text>领取</text>
					</label>
					<label class="m-r-15">
						<radio :checked="userType == 2" value="2" /><text>新人券</text>
					</label>
					<label>
						<radio :checked="userType == 3" value="3" /><text>赠送券</text>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="item" style="height: auto;flex-direction: column;align-items:unset;">
			<view class="f-row" style="height: 100rpx;align-items: center;">
				<view class="title">是否限量</view>
				<view class="item-data">
					<radio-group @change="radioChange($event , 'isLimitNum')">
						<label class="m-r-15">
							<radio :checked="isLimitNum == 1" value="1" /><text>限量</text>
						</label>
						<label>
							<radio :checked="isLimitNum == 2" value="2" /><text>不限量</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="f-row" style="align-items: center;" v-if="isLimitNum == 1">
				<view class="title">发布数量</view>
				<view class="f-row f-1" style="align-items: center;">
					<view class="f-row" style="height: 60rpx;border: 2rpx solid #e8e8e8;border-radius: 16rpx;width: 270rpx;overflow: hidden;">
						<view class="click-opacity reduce-icon" :style="(couponNum - 1 < 0) ? 'background-color: #f8f8f8': ''" @click="couponNumClick(false)">
							<view style="font-size: 32rpx;">-</view>
						</view>
						<view style="flex: 1;display: flex;justify-content: center;align-items: center;padding: 0 30rpx;">
							<input style="display: inline-block;height:60rpx;line-height: 60rpx;white-space: nowrap;
									overflow-x: hidden;max-width: 60rpx;"
							 @input="inputHandle($event , 'couponNum')" maxlength="4" type="number" :value="couponNum">
						</view>
						<view class="click-opacity add-icon" :style="(couponNum + 1 > 1000) ? 'background-color: #f8f8f8': ''" @click="couponNumClick(true)">
							<view style="font-size: 32rpx;">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="title">排序</view>
			<view class="f-row f-1" style="align-items: center;">
				<view class="f-row" style="height: 60rpx;border: 2rpx solid #e8e8e8;border-radius: 16rpx;width: 270rpx;overflow: hidden;">
					<view class="click-opacity reduce-icon" :style="(sortNum - 1 < 0) ? 'background-color: #f8f8f8': ''" @click="sortNumClick(false)">
						<view style="font-size: 32rpx;">-</view>
					</view>
					<view style="flex: 1;display: flex;justify-content: center;align-items: center;padding: 0 30rpx;">
						<input style="display: inline-block;height:60rpx;line-height: 60rpx;white-space: nowrap;
								overflow-x: hidden;max-width: 60rpx;"
						 @input="inputHandle($event , 'sortNum')" maxlength="3" type="number" :value="sortNum">
					</view>
					<view class="click-opacity add-icon" :style="(sortNum + 1 > 999) ? 'background-color: #f8f8f8': ''" @click="sortNumClick(true)">
						<view style="font-size: 32rpx;">+</view>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="title">状态</view>
			<view class="item-data">
				<radio-group @change="radioChange($event, 'couponStatus')">
					<label class="m-r-15">
						<radio :checked="couponStatus == 1" value="1"/><text>开启</text>
					</label>
					<label>
						<radio :checked="couponStatus == 0" value="0"/><text>关闭</text>
					</label>
				</radio-group>
			</view>
		</view>
		<view style="width: 100%;height: 100rpx;"></view>
		<view class="submit-button">添加</view>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				couponType: 1,
				condition: 1,
				usedayType: 1,
				getTime: 1,
				userType: 1,
				isLimitNum: 1,
				couponStatus: 1,

				discountNum: 0,
				miniPay: 0,
				useday: 0,
				date: currentDate,
				secdate: '',
				limitDate: currentDate,
				limitSecDate: '',
				couponNum: 0,
				sortNum: 0,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			_this = this;
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange(e, flag) {
				if (flag) {
					if ((new Date(e.detail.value).getTime() > new Date(_this.date).getTime()) && _this.secdate !== '') {
						_this.$utils.showToast('开始时间不能比结束时间晚');
						return;
					}
					_this.date = e.detail.value;
				} else if (!flag) {
					if ((new Date(e.detail.value).getTime() < new Date(_this.date).getTime()) && _this.date !== '') {
						_this.$utils.showToast('结束时间不能比开始时间早');
						return;
					}
					_this.secdate = e.detail.value;
				}
			},
			bindSecDateChange(e, flag) {
				if (flag) {
					if ((new Date(e.detail.value).getTime() > new Date(_this.limitSecDate).getTime()) && _this.limitSecDate !== '') {
						_this.$utils.showToast('开始时间不能比结束时间晚');
						return;
					}
					_this.limitDate = e.detail.value;
				} else if (!flag) {
					if ((new Date(e.detail.value).getTime() < new Date(_this.limitDate).getTime()) && _this.limitDate !== '') {
						_this.$utils.showToast('结束时间不能比开始时间早');
						return;
					}
					_this.limitSecDate = e.detail.value;
				}
			},
			discountNumClick(flag) {
				if (flag && (_this.discountNum + 1 <= 9999)) {
					_this.discountNum += 1;
				} else if (!flag && (_this.discountNum - 1) >= 0) {
					_this.discountNum -= 1;
				}
			},
			miniPayClick(flag) {
				if (flag && (_this.miniPay + 1 <= 9999)) {
					_this.miniPay += 1;
				} else if (!flag && (_this.miniPay - 1) >= 0) {
					_this.miniPay -= 1;
				}
			},
			usedayClick(flag) {
				if (flag && (_this.useday + 1 <= 999)) {
					_this.useday += 1;
				} else if (!flag && (_this.useday - 1) >= 0) {
					_this.useday -= 1;
				}
			},
			sortNumClick(flag) {
				if (flag && (_this.sortNum + 1 <= 999)) {
					_this.sortNum += 1;
				} else if (!flag && (_this.sortNum - 1) >= 0) {
					_this.sortNum -= 1;
				}
			},
			couponNumClick(flag) {
				if (flag && (_this.couponNum + 1 <= 1000)) {
					_this.couponNum += 1;
				} else if (!flag && (_this.couponNum - 1) >= 0) {
					_this.couponNum -= 1;
				}
			},
			radioChange(e, str) {
				_this[str] = e.target.value;
				console.log(_this.condition);
			},
			inputHandle(e, str) {
				_this[str] = parseFloat(e.target.value);
			},
			addGoods() {

			}
		}
	}
</script>

<style>
	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100rpx;
		margin: 0 30rpx;
	}

	.title {
		text-align: right;
		width: 200rpx;
		font-size: 26rpx;
	}

	.title::after {
		content: "：";
		font-size: 24rpx;
	}

	.item-data {
		display: flex;
		height: 60rpx;
		padding: 0 15rpx;
		border-radius: 16rpx;
		flex: 1;
		align-items: center;
	}

	.item-data input {
		display: inline-block;
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.m-r-15 {
		margin-right: 15rpx;
	}

	text {
		font-size: 26rpx;
	}

	.reduce-icon {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		background-color: #d8d8d8;
	}

	.add-icon {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		background-color: #d8d8d8;
	}
</style>
